<template>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div @click="JumpDetail(item)" class="homeHealth" v-for="(item, index) in list" :key="index">
            <img v-lazy="item?.img" alt="" />
            <div>
                <p>{{ item.title }}{{ item.name }}</p>
                <p>{{ item.time }}</p>
                <p>{{ item.name }}{{ item.contend }}</p>
            </div>
        </div>
    </van-list>
</template>
<script lang="ts" setup>
// @ts-ignore
import { ref } from "vue";
// @ts-ignore
import instance from '../../axios/index.ts';
// @ts-ignore
import {  useCounterStore } from '../../pinia/index.ts'
import { useRouter } from 'vue-router'

const store = useCounterStore()
const router = useRouter()
// 掉接口
const arr: any = ref([])
instance.post('/api/homeall').then((res: any) => {
    arr.value = res.data.data
})
// 上拉加载
const list: any = ref([]);
const loading = ref(false);
const finished = ref(false);
const page = ref(1);//当前页数
const pageSize = ref(10);//每页条数
const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
        page.value += 1;
        instance.post('/api/homeall').then((res: any) => {
            let newarr = (res.data.data.splice(page.value * pageSize.value, 10))
            list.value = [...list.value, ...newarr]
        })
        // 加载状态结束
        loading.value = false;

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (list.value.length >= 500) {
            finished.value = true;
        }
    }, 0);
}

const JumpDetail=(item:any)=>{
    store.detail=item
    router.push('/detail')
}
</script>
<style lang="scss" scoped>
html,body{
    width: 100%;
    height: 100%;
    background: #e1e1e1;
}
.homeHealth {
    width: 100%;
    height: 1rem;
    text-align: center;
    background: #fff;
    border-radius: .3rem;
    margin-top: .1rem;
    img {
        width: 1rem;
        height: 1rem;
        float: right;
    }

    div {
        float: right;
        line-height: .35rem;
        margin-right: .3rem;
    }

}
</style>